@import '../../style/color.scss';
@import '../../style/font.scss';

.header-wrapper {
  background: #8FD57D;
  height: 100px;

  .header {
    display: inline-block;

    .logo {
      vertical-align: middle;
      display: inline-block;
      padding: 17px 20px;

      img {
        display: block;
        width: 63px;
        height: 66px;
      }
    }

    .web-name {
      display: inline-block;
      vertical-align: middle;

      font-family: $DFYuanW7-GBK;
      color: #FFF;
    }


  }
  .header-right-img{
    float: right;
    margin: 8px 25px 0 0;
  }
}

@media screen and (max-width: 1919px) {
  .header-wrapper {
    background: #8FD57D;
    height: 86px;

    .header {
      display: inline-block;

      .logo {
        vertical-align: middle;
        display: inline-block;
        padding: 10px;

        img {
          display: block;
          width: 63px;
          height: 66px;
        }
      }

      .web-name {
        display: inline-block;
        vertical-align: middle;
        font-family: $DFYuanW7-GBK;
        color: #FFF;
        & > img {
          width: 409px;
          height: 36px;
        }
      }


    }
    .header-right-img{
      float: right;
      margin: 20px 25px 0 0;
      width: 222px;
      height: 51px;
    }
  }

}

.v-header-wrapper {
  background: #8FD57D;
  height: 120px;

  .header {
    display: inline-block;

    .logo {
      vertical-align: middle;
      display: inline-block;
      padding: 20px 10px;

      img {
        display: block;
        width: 80px;
        height: 80px;
      }
    }

    .web-name {
      display: inline-block;
      vertical-align: middle;
      font-family: $DFYuanW7-GBK;
      color: #FFF;
      & > img {
        width: 409px;
        height: 48px;
      }
    }


  }
  .header-right-img{
    float: right;
    margin: 33px 15px 33px 0;
    width: 222px;
    height: 51px;
  }
}
